<!-- 公共表格分页组件-->
<style lang="scss" scoped>
@import '@/assets/styles/uno.scss';
</style>
<template>
  <div class="publicTable">
    <el-table
      :data="tableData"
      stripe
      border
      row-key="id"
      style="width: 100%"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      @selection-change="handleSelectionChange"
    >
      <!-- 表格是否开启选择 是否显示序号 -->
      <!--  :index="getIndex" -->

      <el-table-column
        type="index"
        label="序号"
        :width="`${String(tableConfig.serialConfig.width)}`"
        v-if="tableConfig.serialConfig?.show"
      >
      </el-table-column>
      <el-table-column
        type="selection"
        width="55"
        v-if="tableConfig.haveSelection"
        :reserve-selection="true"
      >
      </el-table-column>

      <!-- 表格列表数据 -->

      <el-table-column
        v-for="(item, index) in tableConfig.props"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="`${String(item.width)}`"
        :fixed="item.fixed"
      >
        <template v-if="item.formatter" #default="{ row }">
          <p>
            {{ item.formatter[formatterFun(item.prop, row)] }}
          </p>
        </template>
        <template v-if="item.slot" #default="{ row, $index }">
          <slot :name="item.slot" :row="row" :index="$index"></slot>
        </template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column
        :fixed="tableConfig.haveOperation.fixed"
        :label="tableConfig.haveOperation.title"
        v-if="tableConfig.haveOperation.show"
      >
        <template #default="{ row }">
          <slot :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-row
      type="flex"
      justify="end"
      style="margin-top: 32px"
      v-if="tableConfig.pagination?.show"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="tableConfig.pagination.pageSizes"
        :page-size="page.pageSize"
        :layout="tableConfig.pagination.layout"
        :total="page.total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script setup>
let { tableData, tableConfig } = defineProps({
  tableData: {
    type: Array,
    default: [],
  },
  tableConfig: {
    type: Object,
    default: {},
  },
  page: {
    type: Object,
    default: {},
  },
});
const formatterFun = (prop, row) => {
  let value = prop.split('.');
  let a = value.reduce((obj, key) => {
    return obj?.[key];
  }, row);
  return a;
};
let emit = defineEmits(['sizeChange', 'pageChange', 'selectChange']);
// 当前条数改变
const handleSizeChange = (size) => {
  emit('sizeChange', size);
};
//当前页数发生改变
const handleCurrentChange = (val) => {
  emit('pageChange', val);
};
//多选
const handleSelectionChange = (val) => {
  emit('selectChange', val);
};

console.log(tableConfig, 'tableConfig', tableData);
</script>
